{include file="public/header" select="1" /}
<body>
<div class="title bgc">
    <i class="layui-icon layui-icon-left" onclick="goBack()"></i>
    商品详情
</div>

<div class="swiper swiper1">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {foreach name="$info.images" item="vo"}
            <div class="swiper-slide">
                <img src="{$vo}" alt=""/>
            </div>
            {/foreach}
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

<div class="shop-details edge bgc">
    <p>￥{$info.price} <span>￥{$info.market_price}</span></p>
    <p>{$info.title}</p>
    <p>剩余:{$info.stock} <span>销量:{$info.sales}</span></p>
</div>

<div class="edge shop-details-news bgc">
    <p>商品详情</p>
    <div>{:htmlspecialchars_decode($info['content'])}</div>
</div>

<div class="shop-details-btn">
    <p class="toggleModel">加入购物车</p>
    <p class="toggleModel1">立即购买</p>
</div>

<div class="model">
    <div class="model-news bgc">
        <div class="model-news-top">
            <div class="model-new">
                <img src="/static/index/img/nav1.png" alt="">
                <div class="model-news-rgt">
                    <p>{$info.title}<i class="layui-icon layui-icon-close"></i></p>
                    <p>￥{$info.price}</p>
                    <p>库存:{$info.stock}</p>
                </div>
            </div>
            <div class="stepper">
                数量：
                <div class="minus">-</div>
                <input type="hidden" id="stock" value="{$info.stock}"/>
                <input class="inpNum" type="number" name="num" id="num" value="{if $info.stock>0}1{else/}0{/if}"
                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,0})?).*$/g, '$1')">
                <div class="add">+</div>
            </div>
        </div>
        <div class="model-news-btm addCart"><a href="javascript:;">加入购物车</a></div>
        <div class="model-news-btm1 addOrder"><a href="javascript:;">立即购买</a></div>
    </div>
</div>
</body>
{include file="public/footer" select="1" /}
<script>
    $(".addCart").click(function () {
        var num = $(".inpNum").val();
        if (num <= 0) {
            layer.msg('数量错误');
            return false;
        }
        var load = layer.load(2);
        $.ajax({
            type: 'POST',
            url: '{:url("cart/add")}',
            data: {num: num, id: '{$info.id}'},
            dataType: "json",
            success: function (data) {
                layer.close(load);
                if (data.code === 1) {
                    layer.msg(data.msg);
                    $('.model').css('display', 'none');
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    });
    $('.addOrder').click(function () {
        var num = $(".inpNum").val();
        if (num <= 0) {
            layer.msg('数量错误');
            return false;
        }
        _ajax('{:url("product/submit")}', {num: num, id: '{$info.id}'});
    });
    // 数量加减
    numInput('.minus', '.add', '.inpNum');

    new Swiper(".swiper-container", {
        pagination: {
            el: ".swiper-pagination",
            // clickable: true,
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        loop: true,
    })
    $('.toggleModel').click(function () {
        $('.model').css('display', 'block')
        $('.model-news-btm').css('display', 'block').siblings('.model-news-btm1').css('display', 'none')
    })
    $('.toggleModel1').click(function () {
        $('.model').css('display', 'block')
        $('.model-news-btm1').css('display', 'block').siblings('.model-news-btm').css('display', 'none')
    })
    $('.layui-icon-close').click(function () {
        $('.model').css('display', 'none')
    })
</script>